<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动练习</title>
  <style>
    div{
      width: auto; /*宽度自适应*/
      height: 80px;
      background-color: #0aa1ed;
      /*行高就可以解决垂直居中的问题*/
      line-height: 80px;
    }
    ul{
      /*消除样式符号*/
      list-style-type: none;
    }

    /*将所有的li左浮动*/
    li{
      float: left;
      /*width: 70px;*/
      /*设置字体*/
      color: white;
      font-weight: bold;
      /*设置内边距*/
      padding: 0 50px;
    }

    li:hover{
      background-color: rgba(30,30,30,0.5); /*a 表示透明度*/
    }
  </style>
</head>
<body>

<div>
  <ul>
    <li>主页</li>
    <li>校园播客</li>
    <li>精品课程</li>
    <li>研究型教学</li>
    <li>课程联盟</li>
    <li>课程访问排行</li>
    <li>资源中心</li>
  </ul>
</div>


</body>
</html>